<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { getAllFileList, getAllFolder } from '@/service/api';
import BidLibrary from '@/views/bid-materials/bid/modules/bid-library.vue';
import BidDocInfo from "@/views/bid-materials/bid/modules/bid-doc-info.vue";
import First from './first.vue';
import Second from './second.vue';
import Third from './third.vue';

// 初始文件夹
const step = ref<number>(1);
const page = ref<number>(1);
const pages = ref<number>(1);
// 记录路径
const handlePathList = ref<any[]>([
  {
    id: 0,
    folderName: '企业信息库',
    parentId: 0
  }
]);
// 第三级类型判断
const thirdType = ref<number>(1);

// 初始化
onMounted(() => {
  getAllFolderList(0);
});

const folderParentId = ref<number>(0);

// 接收子组件更改
const updateParentValue = (newValue: number, folderInfo: any) => {
  console.log('接收子组件更改', newValue, folderInfo);

  step.value = newValue;
  handlePathList.value.push(folderInfo);
  folderParentId.value = folderInfo.id;
  page.value = 1;

  console.log('handlePathList: ', folderParentId.value);

  // 第三级类型
  thirdType.value = Number.parseInt(folderInfo.folderType, 10);
  if (step.value === 4 || (step.value === 3 && thirdType.value !== 5)) {
    getAllFile(folderInfo.id);
  } else {
    // 刷新文件夹
    getAllFolderList(folderInfo.id);
  }
};

// 点击面包屑
function breadClickHandle(item: any, index: number): any {
  // console.log('点击面包屑: ', item, index);
  // console.log('当前面包屑数据1：', handlePathList.value);
  // console.log('当前面包屑数据2：', thirdType.value);
  page.value = 1;
  step.value = index + 1;
  folderParentId.value = item.id;
  if (index === 0) {
    // 回到第一级
    // step.value = 1;
    // 处理面包屑。只留第一个
    handlePathList.value.splice(1);
    getAllFolderList(0);
  } else {
    if (Number.parseInt(item.folderType, 10) === 5) {
      thirdType.value = 5;
    }
    // 回到上一层
    // step.value -= 1;
    // 处理面包屑。去掉最后一级
    // handlePathList.value.pop();
    handlePathList.value.splice(step.value - handlePathList.value.length);
    getAllFolderList(item.id);
  }
}

// 返回键
function backClick(): any {
  page.value = 1;
  pages.value = 1;
  // 回到上一层
  step.value = handlePathList.value.length - 1;
  // 处理面包屑。去掉最后一级
  handlePathList.value.pop();
  if (Number.parseInt(handlePathList.value[handlePathList.value.length - 1].folderType, 10) === 5) {
    thirdType.value = 5;
  }
  folderParentId.value = handlePathList.value[handlePathList.value.length - 1].id;
  if (step.value === 1) {
    getAllFolderList(0);
  } else {
    getAllFolderList(handlePathList.value[handlePathList.value.length - 1].id);
  }
}

const folderData = ref([]);

const thirdParentId = ref(0);

const fileData = ref([]);

const dataLoading = ref(false);

// 刷新文件夹列表
async function getAllFolderList(parentId: any) {
  dataLoading.value = true;
  const params: any = { parentId, pageNum: page.value, pageSize: 9 };
  const { data, error } = await getAllFolder(params);
  dataLoading.value = false;
  if (!error) {
    folderData.value = data.list;
    pages.value = data.pages;
  }
}

const fileSearch = ref();

// 查询文件列表
async function getAllFile(folderId: any, searchParams?: any) {
  thirdParentId.value = folderId;
  if (thirdType.value === 2 || thirdType.value === 3) {
    return;
  }
  dataLoading.value = true;
  fileSearch.value = searchParams;
  const params = {
    folderId,
    pageNum: page.value,
    pageSize: 9
  };
  const obj = { ...params, ...searchParams };
  const { data, error } = await getAllFileList(obj);
  if (!error) {
    fileData.value = data.list;
    pages.value = data.pages;
    dataLoading.value = false;
  }
}

// 上传成功后刷新
async function updateThirdPage(id: any, params: any) {
  page.value = 1;
  await getAllFile(id, params.value);
}

// 页码切换
function pageChangeHandle() {
  if (step.value === 4 || (step.value === 3 && thirdType.value !== 5)) {
    getAllFile(handlePathList.value[handlePathList.value.length - 1].id, fileSearch.value);
  } else {
    getAllFolderList(handlePathList.value[handlePathList.value.length - 1].id);
  }
}
</script>

<template>
  <div class="w-full">
    <NSpin :show="dataLoading">
      <div class="title">
        <img v-show="step !== 1" class="arrow" src="@/assets/bid-materials/back-icon.png" alt="" @click="backClick" />
        <NBreadcrumb>
          <NBreadcrumbItem
            v-for="(item, index) in handlePathList"
            :key="item.id"
            style="font-size: 20px"
            @click="breadClickHandle(item, index)"
          >
            {{ item.folderName }}
          </NBreadcrumbItem>
        </NBreadcrumb>
      </div>
      <First
        v-if="step === 1"
        :folder-data="folderData"
        @update-value="updateParentValue"
        @refresh="getAllFolderList"
      />
      <Second v-if="step === 2" :folder-data="folderData" @update-value="updateParentValue" />
      <div v-if="step === 3">
        <BidLibrary
          v-if="thirdType === 5"
          :parent-id="folderParentId"
          :folder-data="folderData"
          @bid-library-query="updateParentValue"
          @refresh="getAllFolderList"
        />
        <Third
          v-else
          :third-type="thirdType"
          :file-data="fileData"
          :third-parent-id="thirdParentId"
          @update-file="updateThirdPage"
        />
      </div>
      <BidDocInfo
        v-if="step === 4"
        :third-type="5"
        :file-data="fileData"
        :third-parent-id="thirdParentId"
        @refresh="updateThirdPage"
      />
      <NPagination
        v-if="thirdType !== 2"
        v-model:page="page"
        size="large"
        :page-count="pages"
        show-quick-jumper
        style="float: right; margin-right: 30px; margin-top: 5px"
        @update:page="pageChangeHandle"
      >
        <template #goto>前往</template>
      </NPagination>
    </NSpin>
  </div>
</template>

<style scoped lang="scss">
.title {
  display: flex;
  font-weight: 500;
  font-size: 25px;
  color: #333333;
  line-height: 50px;
  padding-left: 50px;
  padding-bottom: 10px;
  margin-top: 10px;
  border-bottom: #ebeef5 1px solid;
  position: relative;
  .arrow {
    position: absolute;
    width: 15px;
    height: 15px;
    top: 9px;
    left: 17px;
    &:hover {
      cursor: pointer;
    }
  }
  :deep(.n-breadcrumb) {
    font-size: 22px;
  }
}
</style>
